<!DOCTYPE html>
<html>
<head>
  <meta content="IE=11.0000" http-equiv="X-Ua-Compatible">
  <meta charset="utf-8">
  <meta name="renderer" content="webkit">

  <meta http-equiv="X-Ua-Compatible" content="IE=edge,chrome=1">
  <title>住建云-建设单位服务平台</title>
  <link href="../assets/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
  <script src="../assets/plugins/jquery/jquery.min.js"></script>
  <link rel="stylesheet" href="log-on.css">
</head>

<body style="height: 100vh">

<div class="signIn-con">

  <div class="signIn-middle">
    <div class="signIn-logo">
      <img src="../assets/images/log-on/logo.png" alt="">
      <p>住建云-建设单位服务平台</p>
    </div>
    <div class="signIn center-block">
      <div class="QR-code-tab"></div>
      <ul class="signIn-tab clearfix">

        <li class="active"><span>短信登录</span></li>
        <li><span>密码登录</span></li>
      </ul>
      <div class="signIn-box">
        <div class="message-log-on active">
          <form action="">
            <div class="form-content">
              <div class="form-content-item">
                <!--<p>手机号</p>-->
                <input type="text" class="form-control" placeholder="">
                <span class="help-block red"></span>
              </div>

              <div class="form-content-item">
                <!--<p>验证码</p>-->
                <div class="flex-h" style="justify-content: space-between">
                  <input type="password" class="form-control get-in" placeholder="">
                  <button class="getCaptcha">获取验证码</button>
                </div>

                <span class="help-block red"></span>
              </div>
            </div>
            <div class="signIn-submit">
              <button class="signIn-submit-btn" disabled>登录</button>

            </div>
          </form>
        </div>
        <div class="password-log-on">
          <form action="">
            <div class="form-content" style="margin-bottom: 24px">
              <div class="form-content-item">
                <p>账号：</p>
                <input type="text" class="form-control" placeholder="">
                <span class="help-block red">您输入的账号不存在</span>
              </div>

              <div class="form-content-item" style="margin-bottom: 20px">
                <p>密码：</p>
                <input type="password" class="form-control" placeholder="">
                <span class="help-block red">您输入的密码错误</span>
              </div>
              <p class="clearfix">
                <span class="pull-left">
              <label class="mt-checkbox mt-checkbox-outline table-checkbox">
                  <input type="checkbox" checked>
                  <span></span>
                </label>
                <span style="display: inline-block;transform: translateY(-2px)"> 保持登录状态</span>
            </span>
                <a class="pull-right blue" href="#">忘记密码？</a>
              </p>
            </div>
            <div class="signIn-submit">

              <button class="signIn-submit-btn" disabled>登录</button>

            </div>
          </form>
        </div>



      </div>
      <div class="show-QR-code">
        <ul class="signIn-tab clearfix">
          <li><span>微信/支付宝 扫码登录</span></li>
        </ul>
        <div class="QR-code-box">

          <img src="../assets/images/log-on/erweima.png" alt="">
        </div>
      </div>


    </div>
    <p class="text-center">

      <a class="this-underline" href="#">
        没有账号？<span class="purple">立即注册</span>
      </a>
    </p>

  </div>


<p class="copyright clearfix">

  <span class="pull-left">住建云服务协议  I  隐私政策  I  帮助  </span>
  <span class="pull-right">技术支持：安徽德拓科技有限公司</span>
</p>


</div>


<script>
  $('.QR-code-tab').on('click',function () {
    if ($(this).hasClass('active')) {
      $(this).removeClass('active');
      $('.show-QR-code').removeClass('active')
    }else {
      $(this).addClass('active');
      $('.show-QR-code').addClass('active')
    }
  });

  $('.signIn-tab').children('li').on('click',function () {
    var index = $(this).index() ;
    $(this).addClass('active').siblings().removeClass('active');
    var eml = $('.signIn-box').children('div').eq(index);
    eml.addClass('active').siblings().removeClass('active')
  });

  $('.getCaptcha').on('click',function () {
    var that = $(this);
    that.attr('disabled',true);
    var seconds = 60;
    that.text( seconds + '秒后在点击');
    var timer = setInterval(function () {
      seconds--;
      if (seconds <= 0) {
        clearInterval(timer);
        that.attr('disabled',false);
        that.text('获取验证码');
      } else {
        that.text( seconds + '秒后再点击');
      }
    },1000)
  })
</script>


</body>
</html>
